// const G6 = require('@antv/g6');
const G6 = require('../../../../../g6/src');
const Editor = require('../../../../src/index');
const Simulate = require('event-simulate');
const expect = require('chai').expect;
function getClientByPoint(canvas, x, y) {
  const pixelRatio = canvas.get('pixelRatio');
  return canvas.getClientByPoint(x * pixelRatio, y * pixelRatio);
}
describe('page flow', () => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  const data = require('../../../../demos/data/sample.json');
  const flow = new Editor.Flow({
    graph: {
      container,
      height: 500
    }
  });
  const graph = flow.getGraph();
  const dom = graph.getMouseEventWrapper();
  // graph.on('click', ev => {
  //   console.log(ev);
  // });
  // flow.on('hovernode:beforeshowanchor', ev => {
  //   if (ev.anchor.index === 1) {
  //     ev.cancel = true;
  //   }
  // });
  // flow.on('hovernode:beforeshowanchor', ev => {
  //   if (ev.anchor.index === 1) {
  //     ev.cancel = true;
  //   }
  // });
  // flow.on('dragedge:beforeshowanchor', ev => {
  //   // ev.sourceAnchor  源锚点
  //   // ev.source        源子项
  //   // ev.targetAnchor  目标锚点
  //   // ev.target        目标子项
  //   if (ev.targetAnchor.index === 1) {
  //     ev.cancel = true;
  //   }
  //   // console.log(ev);
  //   // ev.cancel = true; // 若设置为 true 则取消显示要去连接的锚点
  // });
  it('register new flow node', () => {
    Editor.Flow.registerNode('new-flow-node', {});
    expect(G6.Shape.Node['new-flow-node'].getSelectedStyle).not.equal(undefined);
  });
  it('register new flow edge', () => {
    Editor.Flow.registerEdge('new-flow-edge', {});
    expect(G6.Shape.Edge['new-flow-edge'].getSelectedStyle).not.equal(undefined);
  });
  it('register new flow group', () => {
    Editor.Flow.registerGroup('new-flow-group', {});
    expect(G6.Shape.Group['new-flow-group'].getSelectedStyle).not.equal(undefined);
  });
  it('read', () => {
    flow.read(data);
    const graph = flow.getGraph();
    const items = graph.getItems();
    expect(items.length).equal(10);
  });
  it('save', () => {
    flow.save();
  });
  it('node model', () => {
    const item = flow.find('9cf739d1');
    flow.update(item, {
      label: 'xxx',
      size: [ 10, 10 ],
      color: '#444'
    });
    let group = item.getGraphicGroup();
    let label = group.findBy(child => {
      return child.get('type') === 'text';
    });
    let keyShape = item.getKeyShape();
    expect(label.attr('text')).equal('xxx');
    expect(keyShape.attr('fill')).equal('#858585');
    expect(keyShape.attr('stroke')).equal('#5e5e5e');
    expect(keyShape.attr('path')).to.deep.equal([[ 'M', -1, -5 ], [ 'l', 2, 0 ], [ 'a', 4, 4, 0, 0, 1, 4, 4 ], [ 'l', 0, 2 ], [ 'a', 4, 4, 0, 0, 1, -4, 4 ], [ 'l', -2, 0 ], [ 'a', 4, 4, 0, 0, 1, -4, -4 ], [ 'l', 0, -2 ], [ 'a', 4, 4, 0, 0, 1, 4, -4 ], [ 'z' ]]);
    flow.update(item, {
      style: {
        fill: 'white'
      },
      label: {
        fill: 'blue',
        text: 'dddd'
      }
    });
    group = item.getGraphicGroup();
    label = group.findBy(child => {
      return child.get('type') === 'text';
    });
    keyShape = item.getKeyShape();
    expect(label.attr('text')).equal('dddd');
    expect(label.attr('fill')).equal('blue');
    expect(keyShape.attr('fill')).equal('white');
  });
  it('edge model', () => {
    const item = flow.find('9d8ab285');
    flow.update(item, {
      label: 'zzz',
      shape: 'flow-base'
    });
    let group = item.getGraphicGroup();
    let label = group.findBy(child => {
      return child.get('type') === 'text';
    });
    let keyShape = item.getKeyShape();
    expect(label.attr('text')).equal('zzz');
    expect(keyShape.attr('path')).to.deep.equal([[ 'M', 188.83974305147368, 41.5 ], [ 'L', 189.24893481217688, 105.20019187208388 ]]);
    flow.update(item, {
      label: {
        fill: 'red',
        text: 'kkk'
      },
      labelRectStyle: {
        fill: 'yellow'
      },
      style: {
        stroke: 'pink'
      }
    });
    group = item.getGraphicGroup();
    keyShape = item.getKeyShape();
    label = group.findBy(child => {
      return child.get('type') === 'text';
    });
    const labelRect = group.findBy(child => {
      return child.get('type') === 'rect';
    });
    expect(labelRect.attr('fill')).equal('yellow');
    expect(label.attr('text')).equal('kkk');
    expect(label.attr('fill')).equal('red');
    expect(label.attr('fill')).equal('red');
    expect(keyShape.attr('stroke')).equal('pink');
  });
  it('on:click', () => {
    let called = false;
    flow.on('click', ev => {
      expect(ev._type).equal('click');
      called = true;
    });
    const graph = flow.getGraph();
    const canvas = graph.getCanvas();
    const point = {
      x: 10,
      y: 10
    };
    const client = getClientByPoint(canvas, point.x, point.y);
    Simulate.simulate(dom, 'mousedown', {
      clientX: client.clientX,
      clientY: client.clientY
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: client.clientX,
      clientY: client.clientY
    });
    expect(called).equal(true);
  });
  it('on:mousedown', () => {
    let called = false;
    flow.on('mousedown', ev => {
      expect(ev._type).equal('mousedown');
      called = true;
    });
    const graph = flow.getGraph();
    const canvas = graph.getCanvas();
    const point = {
      x: 10,
      y: 10
    };
    const client = getClientByPoint(canvas, point.x, point.y);
    Simulate.simulate(dom, 'mousedown', {
      clientX: client.clientX,
      clientY: client.clientY
    });
    expect(called).equal(true);
  });
  it('on:mouseup', () => {
    let called = false;
    flow.on('mouseup', ev => {
      expect(ev._type).equal('mouseup');
      called = true;
    });
    const graph = flow.getGraph();
    const canvas = graph.getCanvas();
    const point = {
      x: 10,
      y: 10
    };
    const client = getClientByPoint(canvas, point.x, point.y);
    Simulate.simulate(dom, 'mouseup', {
      clientX: client.clientX,
      clientY: client.clientY
    });
    expect(called).equal(true);
  });
  it('autoZoom', () => {
    flow.autoZoom();
  });
  it('resetZoom', () => {
    flow.resetZoom();
  });
  it('zoom', () => {
    flow.zoom(0.5);
    flow.zoom(1.5);
  });
  it('focus', () => {
    flow.focus('9b3d008f');
  });
  it('setSelected', () => {
    flow.setSelected('9b3d008f', true);
  });
  it('getSelected', () => {
    expect(flow.getSelected()[0].id).equal('9b3d008f');
  });
  it('clearSelected', () => {
    flow.clearSelected();
    expect(flow.getSelected().length).equal(0);
  });
  it('clearActived', () => {
    flow.clearActived();
    expect(flow.getActived().length).equal(0);
  });
  it('setActived', () => {
    flow.setActived('9b3d008f', true);
  });
  it('getActived', () => {
    expect(flow.getActived()[0].id).equal('9b3d008f');
  });
  it('click select node', () => {
    const node = graph.find('9b3d008f');
    const model = node.getModel();
    const point = graph.getClientPoint(model);
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
    expect(flow.getSelected()[0]).eql(node);
  });
  it('click select edge', () => {
    const edge = graph.find('9d8ab285');
    const points = edge.getPoints();
    const point = graph.getClientPoint({
      x: (points[0].x + points[1].x) / 2,
      y: (points[0].y + points[1].y) / 2
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
    expect(flow.getSelected()[0]).eql(edge);
  });
  it('click select group', () => {
    const group = graph.add('group', {
      id: 'group_1'
    });
    const keyShape = group.getKeyShape();
    const box = keyShape.getBBox();
    graph.add('node', {
      x: 100,
      y: 100,
      id: 'node_1',
      parent: 'group_1'
    });
    graph.add('node', {
      x: 100,
      y: 150,
      id: 'node_2',
      parent: 'group_1'
    });
    let point = graph.getClientPoint({
      x: box.maxX - 10,
      y: box.maxY - 10
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 0,
      y: 0
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
  });
  it('drag node', () => {
    let point = graph.getClientPoint({
      x: 192,
      y: 210
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 192,
      y: 213
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 102,
      y: 213
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 102,
      y: 213
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
  });
  it('drag add edge from anchor', () => {
    let point = graph.getClientPoint({
      x: 50,
      y: 223
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 51,
      y: 220
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 49,
      y: 224
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 20,
      y: 203
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 20,
      y: 203
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
  });
  it('drag edge controlpoint', done => {
    let point = graph.getClientPoint({
      x: 0,
      y: 0
    });
    const callback = function(ev) {
      graph.off('beforechange', callback);
      expect(ev.updateModel).eql({
        target: 'node_2',
        targetAnchor: 3
      });
      done();
    };
    graph.on('beforechange', callback);
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 20,
      y: 203
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 20,
      y: 203
    });
    Simulate.simulate(dom, 'mousedown', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 22,
      y: 205
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 11,
      y: 203
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 51,
      y: 150
    });
    Simulate.simulate(dom, 'mousemove', {
      clientX: point.x,
      clientY: point.y
    });
    point = graph.getClientPoint({
      x: 51,
      y: 150
    });
    Simulate.simulate(dom, 'mouseup', {
      clientX: point.x,
      clientY: point.y
    });
  });
  // it('drag node in/out group', () => {
  //   const node = graph.find('9b3d008f');
  //   const model = node.getModel();
  //   let point = graph.getClientPoint({
  //     x: 50,
  //     y: 50,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   point = graph.getClientPoint(model);
  //   Simulate.simulate(dom, 'mousedown', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x + 1,
  //     clientY: point.y + 2,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x + 50,
  //     clientY: point.y,
  //   });
  //   point = graph.getClientPoint({
  //     x: 175,
  //     y: 167,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   point = graph.getClientPoint({
  //     x: 175,
  //     y: 167,
  //   });
  //   Simulate.simulate(dom, 'mouseup', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   expect(graph.find('9b3d008f').getModel().parent).eql('group_1');
  //   Simulate.simulate(dom, 'mousedown', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x + 1,
  //     clientY: point.y + 2,
  //   });
  //   point = graph.getClientPoint({
  //     x: 175,
  //     y: 266,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x + 1,
  //     clientY: point.y + 2,
  //   });
  //   Simulate.simulate(dom, 'mouseup', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   expect(graph.find('9b3d008f').getModel().parent).eql('group_1');
  //   Simulate.simulate(dom, 'mousedown', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x + 1,
  //     clientY: point.y + 2,
  //   });
  //   point = graph.getClientPoint({
  //     x: 292,
  //     y: 256,
  //   });
  //   Simulate.simulate(dom, 'mousemove', {
  //     clientX: point.x,
  //     clientY: point.y,
  //   });
  //   setTimeout(() => {
  //     const point = graph.getClientPoint({
  //       x: 292,
  //       y: 256,
  //     });
  //     Simulate.simulate(dom, 'mouseup', {
  //       clientX: point.x,
  //       clientY: point.y,
  //     });
  //     expect(graph.find('9b3d008f').getModel().parent).not.eql('group_1');
  //     done();
  //   }, 600);
  // });
  it('clear', () => {
    flow.clear();
  });
  it('destroy', () => {
    flow.destroy();
  });
});
